<template>
  <div class="nav-first-container">
    <div class="bg-grey padding-b-50" id="forms" v-show="loading">
        <van-cell-group class="group-class">
          <van-cell :title="tpl.title" class="apply"/>
          <div class="margin-b-10">
            <forms ref="forms" :form="form" :table="results" :workObject="workObject"></forms>
            <form-file ref="formFiles" :files="fileData"></form-file>
          </div>
					
					<!-- 公章使用审批权限 8994专属 -->
					<template v-if="$route.query.tplid == '8994'">
					  <van-cell title="公章使用审批权限" class="extr-people">
							<van-image width="100" height="100" @click="previewImg('http://221.13.83.4:2180/app/img/gzsy.png')"
							src="http://221.13.83.4:2180/app/img/gzsy.png" />
						</van-cell>
					</template>
					
          <div class='file-attachment-class'>
            <van-field
              class="textarea-field margin-b-10"
              label-class="field-left-class"
              v-model="base.content"
              rows="3"
              autosize
              label="签批内容"
              type="textarea"
              placeholder="请输入签批内容"
            />
            <van-field
              class="textarea-field margin-b-10"
              label-class="field-left-class "
              rows="1"
              disabled
              autosize
              label="流程附件"
              type="textarea"
            >
              <template slot="input">
                <div class="file-class" v-for="(pre, preIndex) in preAttachment" :key="preIndex" @click="previewFile(pre.fileaddr)">
                  <img class="img-class" :src="$common.fileIcon(fileName(pre.fileaddr, 'type'))">
                  <p class="van-ellipsis name-width">{{ pre.filename }}</p>
                  <van-icon class="margin-l-20" name="clear" @click.stop="deleteFile(preIndex,pre,preAttachment)"/>
                </div>
                <div class="file-class" v-for="(file, fileIndex) in base.attachment" :key="fileIndex+'new'" @click="previewFile(file.url)">
                  <img class="img-class" :src="$common.fileIcon(fileName(file.url, 'type'))">
                  <p class="van-ellipsis name-width">{{ fileName(file.url, 'fullName') }}</p>
                  <van-icon class="margin-l-20" name="clear" @click.stop="deleteFile(fileIndex,file,base.attachment)"/>
                </div>
                <van-uploader :after-read="(file) => afterRead(file, 'file', base.attachment)" 
                  accept="*" />
              </template>
            </van-field>
          </div>
          
        </van-cell-group>
        <!-- 因私出国单独加的信息 -->
        <template v-if="$route.query.tplid == '8908'">
          <div class="extr-area">
            <p class="extr-title">按照西藏高驰信息产业集团有限责任公司有关规定，本人承诺如下：</p>
            <p>一、 保证不泄露国家和集团的秘密。</p>
            <p>二、 自出境之日起算，如果逾期不归：</p>
            <p> 1、 同意将本人按“自动离职处理”；</p>
            <p> 2、 同意将本人现居住产权归属本集团的住房，按规定退还集团；</p>
            <p> 3、 同意将本人包括人事关系及档案在内的所有关系转出集团。</p>
            <p>上述2、3项事宜宜委托本公司员工代为办理。</p>
          </div>
          <van-cell title="委托人" :value="client" is-link class="extr-people" @click="showClient" placeholder="请选择" required/>
          <van-field label="委托人联系电话" v-model="clientTel" placeholder="请输入联系方式" 
          label-class="client-class" input-align="right" required class="margin-b-10"/>
        </template>

      <div class="bottom-btn">
        <van-row>
          <van-col span="7">
            <van-button type="default" size="large" class="default-class" @click="saveBtn">保 存</van-button>
          </van-col>
          <van-col span="17">
            <van-button type="info" size="large" class="info-class" @click="nextStepBtn">下一步</van-button>
          </van-col>
        </van-row>
      </div>

      <!-- 下一步弹框 -->
      <van-popup v-model="nextVisiable" position="bottom" :close-on-click-overlay="false"
      class="van-popup-height">
        <van-row class="next-row-class next-position-fixed">
          <van-col :span="4" class="row-cancel" @click="nextCancel">取消</van-col>
          <van-col :span="16" class="row-title">下一步</van-col>
          <van-col :span="4" class="row-confirm" @click="nextConfirm">确定</van-col>
        </van-row>
        <van-cell title="下一步流程设定" required title-class="left-class" class="flow-calss line-class"/>
        <van-radio-group class="next_radio_class" v-model="base.processValue">
          <van-cell-group>
            <van-cell v-for="(item,index) in nextStepData" :key="item.id" 
            :title="item.key" clickable @click="processConfirm(item)">
              <van-radio slot="right-icon" :name="item.key" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <van-cell title="办理人员" is-link required :value="base.flowuser" title-class="left-class" @click="showFlowPeople" class="flow-calss"/>
      </van-popup>

      <!-- 下一步流程设置  弹框 -->
      <van-popup v-model="processVisiable" position="bottom" :close-on-click-overlay="false">
        <van-picker class="processPicker" show-toolbar title="" :columns="nextStepData" 
        value-key="key" @cancel="processVisiable = false" />
      </van-popup>

      <!-- 办理人员下拉框 -->
      <van-popup v-model="flowShow" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="flowCancel">取消</van-col>
          <van-col :span="16" class="row-title">办理人员</van-col>
          <van-col :span="4" class="row-confirm" @click="flowConfirm">确定</van-col>
        </van-row>
        <van-search
          v-if="newflowuser.length >= 10"
            v-model="searchValue"
            placeholder="请输入搜索关键词"
            show-action>
            <div slot="action" @click="onSearch">搜索</div>
        </van-search>
        <van-picker ref="peoplePicker" :columns="resultData" />
      </van-popup>

      <!-- 办理人员选择，多选 -->
      <van-popup v-model="flowShowMultiple" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false" class="multiple-user">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="flowShowMultiple = false">取消</van-col>
          <van-col :span="16" class="row-title">办理人员</van-col>
          <van-col :span="4" class="row-confirm" @click="flowConfirmMultiple">确定</van-col>
        </van-row>
        <div style="padding-top: 63px;padding-bottom:55px;">
          <van-search
            v-if="newflowuser.length >= 10"
              v-model="searchValue"
              placeholder="请输入搜索关键词"
              show-action>
              <div slot="action" @click="onSearch">搜索</div>
          </van-search>
          <van-checkbox-group v-model="multipleResult" @change="multipleChange"
          ref="userCheckGroup">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in resultData"
                clickable
                :key="item"
                :title="item"
                @click="toggle(index)"
              >
                <van-checkbox slot="right-icon" shape="square" :name="item" ref="checkboxes" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
        <!-- 底部按钮 全选，反选 -->
        <van-row class="checkboxes-btn" >
          <van-col span="12">
            <van-button size="large" type="default" @click="toggleAll">反选</van-button>
          </van-col>
          <van-col span="12">
            <van-button size="large" type="info" @click="checkAll">全选</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!-- 办理人员选择，树状结构 ,所有人员 -->
    <van-popup v-model="flowShowAll" position="bottom" :safe-area-inset-bottom="true"
    :close-on-click-overlay="false" class="multiple-alluser"
    :style="flowChangeTemp.length <= 0?'height: 78vh;':'height: 86vh'">
      <van-row class="next-row-class">
        <van-col :span="4" class="row-cancel" @click="flowShowAll = false">取消</van-col>
        <van-col :span="16" class="row-title">办理人员</van-col>
        <van-col :span="4" class="row-confirm" @click="flowAllConfirm">确定</van-col>
      </van-row>
      <div style="padding-top: 53px;">
        <side-choose v-if="flowShowAll" ref="flowChoose" :items="items" :default.sync="flowShowALLValue"  titleText="选择办理人员" :maxHeight="flowShowMore?'69vh':'62vh'" @changed="onlineFlowChanged"></side-choose>
      </div>
      <div class="bottom-btn-all">
          <!-- 收拢 -->
          <div v-if="flowChangeTemp.length > 0 && !flowShowMore" class="padding-12 font-size14">
            <van-row>
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="18" class="font-color3">
                <van-col span="19" class="van-ellipsis">
                  <span v-for="(sign, index) in flowChangeTemp" :key="'sign'+index" class="more-class">{{sign.name}}</span>
                </van-col>
                <van-col span="5">等<span style="color: #1A76FF">{{flowChangeTemp.length}}</span>人</van-col>
              </van-col>
              <van-col span="2" class="align-right" @click="flowShowMore = true">
                <img src="../../assets/documents/triangle.png" width="10px" height="6px" />
              </van-col>
            </van-row>
          </div>
          <!-- 展开 -->
          <div v-if="flowChangeTemp.length > 0 && flowShowMore" class="padding-15 font-size14">
            <van-row type="flex" justify="space-between">
              <van-col span="4" class="font-color6">已选：</van-col>
              <van-col span="4" class="font-color6 align-right" @click="clearFlow('read')">清空</van-col>
            </van-row>
            <van-row class="margin-t-15" style="display: flex;align-items: flex-end;">
              <van-col span="22">
                <span v-for="(sign, index) in flowChangeTemp" :key="'more'+index" class="more-class">{{sign.name}}</span>
              </van-col>
              <van-col span="2" class="align-right" @click="flowShowMore = false">
                <img src="../../assets/documents/triangle_up.png" width="10px" height="6px" /></van-col>
            </van-row>
          </div>
        </div>
    </van-popup>

      <!-- 因私出国委托人数据 -->
      <van-popup v-model="clientVisiable" position="bottom" :close-on-click-overlay="false"
      :safe-area-inset-bottom="true">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="clientVisiable = false">取消</van-col>
          <van-col :span="4" :offset="16" class="row-confirm" @click="singleConfirmChose">确定</van-col>
        </van-row>
        <choose-people
          v-if="clientVisiable"
          :items="items"
          ref="choosePeople" 
          :checked.sync="clientid" 
          :isName="false"
          leftTitle="委托人员"
        />
      </van-popup>
    </div>
  </div>
</template>
<script type="text/javascript">
  import choosePeople from '@/components/ChoosePeople.vue'
  import forms from '@/components/Forms.vue'
  import formFile from '@/components/FormFile.vue'
  import sideChoose from '@/components/SideChoose.vue'
  import { ImagePreview } from 'vant';
  export default {
    components: {
      'choose-people': choosePeople,
      'forms': forms,
      'form-file': formFile,
      'side-choose': sideChoose,
      [ImagePreview.Component.name]: ImagePreview.Component,
    },
    data() {
      return {
        formTitle: "" ,           //页面状态  保存还是提交
        loading: false,
        activeStep: "",           //当前步骤
        base:{
          applyPerson: "",
          number: "",
          content: "",
          attachment: [],
          processValue: "",       //下一步流程值
          flowuser: "",           //办理人员
          workid: "",             //流程id
          typeid: "",             //审批父类id
          tplid: "",              //审批id
          title: "",              //报销标题
          flowid: "",
          perid: ""
        },
        work: {},
        tpl: '',                  //基本信息
        preAttachment: [],        //编辑时候的附件显示
        preAttachmentType: '',
        items:[],
        client: "",               //因私出国的委托人
        clientid: "",
        clientTel: "",            //因私出国的委托人联系电话
        clientVisiable: false,

        nextVisiable: false,      //下一步控制器
        processVisiable: false,   //下一步流程设定控制器
        form: [],                 //高级表单
        fileData: [],             //表单附件
        results:[],               //高级表单表格
        workObject: {},           //work对象
        nextStep: "",             //下一步单选值
        nextStepData:[],          //步骤
        flowShow: false,          //办理人员控制器
        flowPeopleData:{          //办理人员数据
        
        },
        newflowuser:[],           //办理人员显示数组

        multipleResult: [],       //办理人员多选数组值
        flowShowMultiple: false,  //办理人员多选控制器
        flowkey2:'',              //判断是多人还是单人审批，1是多人，2是单人

        searchValue:"",           //下拉添加一个搜索框
        resultData:[],            //查询之后的数据

        flowkey1:'',              //办理人是全员时
        flowShowAll: false,          //所有人员办理人控制器
        flowShowALLId: [],           //所有人员 选择后的id
        flowShowALLValue: [],        //所有人员 选择后的信息
        flowShowMore: false,         //显示更多办理人控制器
        flowChangeTemp: [],          //办理人员临时数组

        alreadyFile: false,       //是否已执行默认保存表单方法

      }
    },
    activated() {
      this.$toast({
        duration: 0,
        forbidClick: true,
        className: 'loading-toast',
        icon: require('../../assets/loading.gif'),
      })
      this.formTitle = ""
      this.loading = false
      this.activeStep = "", //当前步骤
      this.base = {
        applyPerson: "",
        number: "",
        content: "",
        attachment: [],
        processValue: "",
        flowuser: "",       //办理人员
        workid: "",         //流程id
        typeid: "",         //审批父类id
        tplid: "",          //审批id
        title: "",          //报销标题
        flowid: "",
        perid: ""
      }
      this.work = {},
      this.tpl = "",
      this.preAttachment = []
      this.preAttachmentType = ''
      this.client = ""//因私出国的委托人
      this.clientid = ""
      this.clientTel = ""//因私出国的委托人联系电话
      this.clientVisiable = false
      this.nextVisiable = false,      //下一步控制器
      this.processVisiable = false,   //下一步流程设定控制器
      this.form = []
      this.fileData = []
      this.results = [],//审批流程
      this.workObject = {}
      this.nextStep = "",//下一步单选值
      this.nextStepData = [],//步骤
      this.flowShow = false
      this.flowPeopleData = { //办理人员数据
        
      }
      this.newflowuser = []

      this.multipleResult = [],       //办理人员多选数组值
      this.flowShowMultiple = false,  //办理人员多选控制器
      this.flowkey2 = '',             //判断是多人还是单人审批，1是多人，2是单人

      this.searchValue="",//下拉添加一个搜索框
      this.resultData=[],//查询之后的数据
      this.alreadyFile = false

      this.$bridge.callHandler('navTitle', {title: '审批表单'})
      this.$bridge.callHandler('navBack')

      // 流程图
      this.$bridge.callHandler('navRight', {title: "流程图"})
      this.$bridge.registerHandler('navRightClicked', (data, callBack)  => {
        this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/gojsChart?isnew=new&id=${this.$route.query.tplid}&type=2&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
      })
      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        this.$router.go(-1)
        responseCallback('go(-1)')
      })
      if (this.$route.query.status == "edit") {
        // 这是编辑
        this.base.workid = this.$route.query.workid
        this.base.typeid = this.$route.query.typeid
        this.base.tplid = this.$route.query.tplid
        this.preAttachmentType = 'new'
        this.baseFormData()
      } else if (this.$route.query.status == 'again') {
        // 这是重新提交
        this.base.workid = this.$route.query.workid
        this.base.typeid = this.$route.query.typeid
        this.base.tplid = this.$route.query.tplid
        this.preAttachmentType = 'new'
        this.baseFormDataAgain()
      } else {
        this.getform()
      }
      this.treeList()
    },
    watch: {
      'nextStep': {
        handler(newV, oldV) {
          if(newV) {
            this.flowPerson()
          }
        }
      },
      'searchValue': {
        handler(newV, oldV) {
          if(newV == '') { // 被关键字清空 还原列表项
            this.resultData = this.$common.deepCopy(this.newflowuser)
          }
        },
        deep: true
      },
      'tpl': {
        handler(newV, oldV) {
          if (newV && newV.flow_img) {
            // this.$bridge.callHandler('navTitle', {title: newV.title})
            // this.$bridge.callHandler("showProcessImg", {
            //   url: `${this.$common.filePath}${newV.flow_img}`
            // })
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'nextVisiable': {
        handler(newV, oldV) {
          if (this.nextVisiable) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'flowShow': {
        handler(newV, oldV) {
          if (this.flowShow) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('navKeepView')
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'flowShowMultiple': {
        handler(newV, oldV) {
          if (this.flowShowMultiple) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('navKeepView')
          }
        }
      },
      /**
       * 监听弹出框，设置导航栏遮罩层
       */
      'flowShowAll': {
        handler(newV, oldV) {
          if (this.flowShowAll) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('navKeepView')
          }
        }
      },
      // 因私出国委托人
      'clientVisiable': {
        handler(newV, oldV) {
          if (this.clientVisiable) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods: {
      /**
       * 查看图片
       */
      previewImg(url) {
        ImagePreview([url])
      },
      /**
       * 返回方法
       * @return {[type]} [description]
       */
      backMethod() {
        if ((this.$route.query.from && this.$route.query.from == 'origin') || this.$route.query.close == 'close') {
          this.$bridge.callHandler('close')
        } else {
          this.$router.go(-1)
        }
      },
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount = fullName.split('.').length
        let fileType   = fullName.split('.')[pointCount - 1]
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
       /**
       * 成功读取文件后 上传
       * @param  {[type]} file     [description]
       * @param  {[type]} formItem [description]
       * @return {[type]}          [description]
       */
      afterRead(file, type, formItem) {
        let self = this
        self.$bridge.callHandler('navKeepView')
        let formData = new FormData()
        formData.append('file', file.file)
        formData.append('do', 'file')
        this.$toast({
          message: '上传中...',
          duration: 0,
          overlay: true,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          headers: { //添加请求头
            'Content-Type': 'multipart/form-data'
          },
          url: `${this.$common.basePath}login.php`,
          data: formData,
          method: 'POST'
        }
        this.$axios(config).then(res => {
          self.$bridge.callHandler('cancelNavKeepView')
          formItem.push({'url':res.data.url, 'name':self.fileName(res.data.url,'fullName')})
          this.$nextTick(_ => {
            this.$toast.clear()
          })
        }).catch(err => {
          self.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            icon: 'cross',
            message: err.msg ? err.msg : '上传失败!'
          })
        })
      },
      /**
       * 附件删除
       * @return {[type]} [description]
       */
      deleteFile(index, file, formItem) {
        this.$bridge.callHandler('navKeepView')
        if (file.id) {
          this.$dialog.confirm({
            title: '提示',
            message: '是否确认删除该文件？删除后不可恢复'
          }).then(() => {
            // on confirm
            let config = {
              method: 'post',
              url: `${this.$common.basePath}aatp5/public/index.php/formfile/form_file/file_del`,
              data: {
                user_id: this.$store.state.userId,
                id: file.id
              }
            }
            this.$axios(config).then(res => {
              this.$bridge.callHandler('cancelNavKeepView')
              formItem.splice(index, 1)
            }).catch(err => {
            })
          }).catch((err) => {
            this.$bridge.callHandler('cancelNavKeepView')
          });
        } else {
          this.$dialog.confirm({
            title: '提示',
            message: '是否确认删除该文件？删除后不可恢复'
          }).then(() => {
            this.$bridge.callHandler('cancelNavKeepView')
            // on confirm
            formItem.splice(index, 1)
          }).catch(() => {
            // on cancel
            this.$bridge.callHandler('cancelNavKeepView')
          });
        }
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName:  this.fileName(item, 'fullName') || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${this.fileName(item, 'fullName')}`)
      },
      /**
       * 树数据
       */
      treeList() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data:{
            do: "department"
          }
        }
        this.$axios(config).then(res => {
          let treeData = this.$common.deepCopy(res.data)
          for (var i = 0; i < treeData.length; i++) {
            treeData[i].text = treeData[i].name
            for (var j = 0; j < treeData[i].children.length; j++) {
              (treeData[i].children)[j].text = (treeData[i].children)[j].name;
              (treeData[i].children)[j].choosed = false
            }
          }
          this.items = this.$common.deepCopy(treeData)
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 得到表单数据
       * @return {[type]} [description]
       */
      getform () {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: "tablelist",
            tplid: this.$route.query.tplid,
            typeid: this.$route.query.typeid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.results = res.data.results
          this.form = res.data.rowdb
          this.fileData = res.data.form_file
          this.base.applyPerson = res.data.username
          this.tpl = res.data.tpl
          this.$nextTick(_ => {
            this.loading = true
            setTimeout(_ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {
        })
      },
      /**
       * 显示流程数据
       * @return {[type]} [description]
       */
      baseFormData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: 'workclassaddlist',
            tplid: this.base.tplid,
            workid: this.base.workid,
            typeid: this.base.typeid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.tpl = res.data.tpl
          this.work = res.data.work
          if (this.$route.query.status == "edit" && this.preAttachmentType == 'new') {
            this.preAttachment = res.data.files
          }
          this.base.number = res.data.work.number
          this.base.applyPerson = res.data.work.username
          this.base.title = res.data.work.title
          this.base.perid = res.data.fow.perid
          this.base.flowid = res.data.fow.flowid
          if (this.$route.query.status == 'edit' && this.formTitle == '') {
            this.form = res.data.rowdb       //表单
            this.results = res.data.results //表格
            this.fileData = res.data.form_file
            this.workObject = res.data.work
          }
          this.nextStepData = res.data.nextstep //下一步流程设定
          if (res.data.nextstep) {
            this.nextStepData = this.nextStepData.map(item => {
              return {
                key: item.flowname,
                id: item.fid
              }
            })

            if (this.nextStepData.length > 0) {
              this.nextStep = this.nextStepData[0].id //设置默认选中第一个
              this.base.processValue = this.nextStepData[0].key
            }
          }

          if (this.$route.query.status == 'edit') {
            this.$nextTick(_ => {
              this.loading = true
              setTimeout(_ => {
                this.$toast.clear()
              },100)
            })
          }
          if (this.formTitle == "保存") {
            this.saveConfirm()
          } else if ( this.formTitle == "提交") {
            // 查询完--打开弹框
            this.nextVisiable = true
          }
        }).catch(err => {
        })
      },
      /**
       * 重新提交的查询数据方法
       * @return {[type]} [description]
       */
      baseFormDataAgain() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: 'workclassaddlist',
            tplid: this.base.tplid,
            workid: this.base.workid,
            typeid: this.base.typeid,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.work = res.data.work
          this.tpl = res.data.tpl
          this.preAttachment = res.data.files
          this.base.applyPerson = res.data.work.username
          this.base.title = res.data.work.title
          this.base.perid = res.data.fow.perid
          this.base.flowid = res.data.fow.flowid
          this.form = res.data.rowdb       //表单
          this.results = res.data.results //表格
          this.fileData = res.data.form_file //表单附件
          this.nextStepData = res.data.nextstep //下一步流程设定
          if (res.data.nextstep) {
            this.nextStepData = this.nextStepData.map(item => {
              return {
                key: item.flowname,
                id: item.fid
              }
            })

            if (this.nextStepData.length > 0) {
              this.nextStep = this.nextStepData[0].id //设置默认选中第一个
              this.base.processValue = this.nextStepData[0].key
            }
          }
          this.$nextTick(_ => {
            this.loading = true
            setTimeout(_ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {

        })
      },
      /**
       * 下一步流程设定 确认按钮
       * @return {[type]} [description]
       */
      processConfirm (e) {
        this.nextStep = e.id
        this.base.processValue = e.key
        // this.processVisiable = false
        this.flowPerson()
      },

      /**
       * 选择下一步的办理人员
       * @return {[type]} [description]
       */
      flowPerson() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: "flow",
            uid: this.$store.state.userId,
            fid: this.nextStep,
            flow_user_id: this.work.uid,   //发起人id
          }
        }
        this.$axios(config).then(res => {
          let persons = res.data.flowuser //设置初始默认值
          persons = persons.split(",");
          // 去重
          let per = new Map();
          persons = persons.filter((item,index,array) => {
            return !per.has(item) && per.set(item, 1)
          })
          this.base.flowuser = persons.toString() //设置初始默认值
          this.flowPeopleData = res.data //存信息，后面'下一步'会用到
          this.newflowuser = res.data.newflowuser

          // flowkey1 判断是全员时
          this.flowkey1 = res.data.flowkey1
          if (res.data.flowkey1 == '1') {
            // 树状结构  默认人  就默认勾选
            this.flowShowALLValue = res.data.flowuser.split(",");
          }
          // flowkey2 用来判断是多人审批还是单人，1是多人，2是单人
          this.flowkey2 = res.data.flowkey2
          if (res.data.flowkey2 == 2) {
            // 将默认值加入到newflowuser中
            this.newflowuser.splice(0, 0, this.base.flowuser)
            // 去重
            let res = new Map();
            this.newflowuser = this.newflowuser.filter((item,index,array) => {
              return !res.has(item) && res.set(item, 1)
            })
          }
          this.resultData = this.newflowuser
          // 设置多人选择组件默认选择项，数组格式的
          this.multipleResult = res.data.flowuser.split(",")
        }).catch(err => {
        })
      },
      /**
       * 所有人员办理人  确认框
       * @return {[type]} [description]
       */
      flowAllConfirm() {
        this.flowShowALLId = this.$refs.flowChoose.getChoosed();
        this.flowShowALLValue = this.$refs.flowChoose.getChoosedByName();
        //人员去重
        let res = new Map();
        this.flowShowALLValue = this.flowShowALLValue.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })

        this.flowShowALLValue = this.flowShowALLValue.map(item => {
          return item.name
        });
        this.base.flowuser = this.flowShowALLValue.toString();
        this.flowShowAll = false;

      },
      /**
       * 树状办理人  清空
       */
      clearFlow() {
        this.flowShowALLId = []
        this.flowShowALLValue = []
        this.flowChangeTemp = []
        this.flowShowMore = false
      },
      /**
       * 树状办理人 在线选人 去重
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      onlineFlowChanged(e) {
        //人员去重
        let res = new Map();
        this.flowChangeTemp = e.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
      },
      /**
       * 点击搜索 过滤选项 
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      onSearch(tempPopupField) {
        let result = this.newflowuser.filter(item => {
          return item.indexOf(this.searchValue) != -1
        })
        this.resultData = result
      },
      /**
       * 显示弹框
       * @return {[type]} [description]
       */
      showFlowPeople() {
        let self = this
        if (self.flowkey1 == '1') {
          this.flowShowAll = true
        }else {
          // flowkey2  判读1是多人，2是单人
          if (self.flowkey2 == '2') {
            self.flowShow = true
            self.$nextTick(_ => {
              self.$refs.peoplePicker.setValues([this.base.flowuser])
            })
          } else if (self.flowkey2 == '1') {
            self.flowShowMultiple = true
            self.$nextTick(_ => {
              // 将复选框默认选中状态
              // self.resultData.forEach((item,index) =>{
              //   if (self.base.flowuser === item) {
              //     self.$refs.checkboxes[index].toggle(true);
              //   }
              // })
            })
          }
        }
      },
      /** 办理人员取消 */
      flowCancel() {
        this.flowShow = false
      },
      /**
       * 办理人员点确定按钮
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      flowConfirm() {
        this.base.flowuser = this.$refs.peoplePicker.getValues()[0]
        this.flowShow = false
        this.searchValue = ''
      },
      /**
       * 多选人  改变事件
       * @return {[type]} [description]
       */
      multipleChange(e) {
        this.multipleResult = e
      },
      /**
       * 办理人员多选 确认按钮
       * @return {[type]} [description]
       */
      flowConfirmMultiple() {
        this.base.flowuser = this.multipleResult.toString()
        this.flowShowMultiple = false
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      /**
       * 保存按钮
       */
      saveBtn() {
        // 触发表单子组件的必填验证
        if (!this.$refs.forms.getFormData()) {

        } else if (!this.$refs.formFiles.getFormData()) {

        } else if (this.$route.query.tplid == '8908' && this.client == '') {
          this.$toast("请选择委托人")
        }else if (this.$route.query.tplid == '8908' && !/^1[34578]\d{9}$/.test(this.clientTel)) {
            this.$toast("请正确输入委托人联系电话")
        }else {
          this.beforeSave()
        }
      },
      /**
       * 保存之前 首先调生成表单的接口
       */
      beforeSave () {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认保存？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          if (this.$route.query.status == "edit") {
            this.preAttachmentType = 'old' //确保不会将删除的附件又重新加载出来
            this.baseFormData()
            this.formTitle = "保存"
          } else {
            // 新增
            let self = this
            let config = {
              method: "post",
              url: `${this.$common.basePath}workclass.php`,
              data: {
                do: "workclassadd",
                tplid: this.$route.query.tplid,
                typeid: this.$route.query.typeid,
                user_id: this.$store.state.userId
              }
            }
            self.$axios(config).then(res => {
              self.$toast.clear()
              self.base.tplid = res.data.tplid
              self.base.workid = res.data.workid
              self.base.typeid = res.data.typeid

              self.$nextTick(_ => {
                self.preAttachmentType = 'old' //确保不会将删除的附件又重新加载出来
                self.baseFormData()
                self.formTitle = "保存"
              })
            }).catch(err => {
              self.$toast.clear()
              self.$toast(err.msg)
            })
          }
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 保存提交
       * @return {[type]} [description]
       */
      saveConfirm () {
        // on confirm
        let saveForm = this.$refs.forms.getFormData()
          saveForm.filesArray = this.$refs.formFiles.getFormData()
          saveForm.number = this.base.number
          saveForm.workid = this.base.workid
          saveForm.tplid = this.base.tplid
          saveForm.typeid = this.base.typeid
          saveForm._typeid = this.base.typeid
          saveForm.user_id = this.$store.state.userId
          saveForm.content = this.base.content
          let preArr = this.preAttachment.map(item => {
            return {'id':item.id, 'url':item.fileaddr,'name':item.filename}
          })
          saveForm.attachment = this.base.attachment.concat(preArr)
          // saveForm.title = this.base.title
          saveForm.perid = this.base.perid;
          saveForm.flowid = this.base.flowid;
          saveForm.do = 'workadd'
          saveForm.statusValue = this.$route.query.status || null
          if(this.$route.query.tplid == '8908') {
            //因私出国的数据
            saveForm.client = this.client
            saveForm.client_tel = this.clientTel
          }
          let config = {
            method: "post",
            url: `${this.$common.basePath}workclass.php`,
            data: saveForm
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type: "success",
              message:'保存成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              // this.$router.push({name:'myApproval'})
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2100)
          }).catch(err => {
            this.$toast.clear()
          })
      },
      /**
       * 下一步按钮
       * @return {[type]} [description]
       */
      nextStepBtn() {
        if (!this.$refs.forms.getFormData()) {

        } else if (!this.$refs.formFiles.getFormData()) {

        } else if (this.$route.query.tplid == '8908' && this.client == '') {
          this.$toast("请选择委托人")
        } else if (this.$route.query.tplid == '8908' && !(this.$common.mobileReg.test(this.clientTel))) {
            this.$toast("请正确输入委托人联系电话")
        } else {
          this.preAttachmentType = 'old' //确保不会二次加载表单附件
          if (this.$route.query.status == 'edit') {
            this.baseFormData()
            this.formTitle = "提交"
          } else {
            // 查看是否有单号  有单号就不用再生成表单 
            if (this.base && this.base.number) {
              this.baseFormData()
              this.formTitle = "提交"
            } else {
              this.$bridge.callHandler('navKeepView')
              // 没有单号  生成表单
              this.$dialog.confirm({
                title: "提示",
                message: "此操作将会生成新的表单，是否继续？"
              }).then(() => {
                this.$toast({
                  duration: 0,
                  forbidClick: true,
                  className: 'loading-toast',
                  icon: require('../../assets/loading.gif'),
                })
                // 首先调生成表单的接口
                let config = {
                  method: "post",
                  url: `${this.$common.basePath}workclass.php`,
                  data: {
                    do: "workclassadd",
                    tplid: this.$route.query.tplid,
                    typeid: this.$route.query.typeid,
                    user_id: this.$store.state.userId
                  }
                }
                this.$axios(config).then(res => {
                  this.$toast.clear()
                  this.base.tplid = res.data.tplid
                  this.base.workid = res.data.workid
                  this.base.typeid = res.data.typeid

                  this.$nextTick(_ => {
                    // 查询流程数据
                    this.baseFormData()
                    this.formTitle = "提交"
                    // 延时执行保存方法
                    setTimeout(_ => {
                      // 执行默认保存表单方法--保存数据
                      let saveForm = this.$refs.forms.getFormData()
                      saveForm.filesArray = this.$refs.formFiles.getFormData()
                      saveForm.number = this.base.number
                      saveForm.workid = this.base.workid
                      saveForm.tplid = this.base.tplid
                      saveForm.typeid = this.base.typeid
                      saveForm._typeid = this.base.typeid
                      saveForm.user_id = this.$store.state.userId
                      saveForm.content = this.base.content
                      let preArr = this.preAttachment.map(item => {
                        return {'id':item.id, 'url':item.fileaddr,'name':item.filename}
                      })
                      saveForm.attachment = this.base.attachment.concat(preArr)
                      // saveForm.title = this.base.title
                      saveForm.perid = this.base.perid;
                      saveForm.flowid = this.base.flowid;
                      saveForm.do = 'workadd'
                      saveForm.statusValue = this.$route.query.status || null

                      // alreadyFile 用来判断附件是否再次提交，执行默认保存方法就不用再提交了
                      this.alreadyFile = true

                      if(this.$route.query.tplid == '8908') {
                        //因私出国的数据
                        saveForm.client = this.client
                        saveForm.client_tel = this.clientTel
                      }
                      let config = {
                        method: "post",
                        url: `${this.$common.basePath}workclass.php`,
                        data: saveForm
                      }
                      this.$axios(config).then(res => {
                      }).catch(err => {
                      })
                    },1500)
                    
                  })

                }).catch(err => {
                  this.$toast.clear()
                  this.$toast.fail(err.msg)
                })
              }).catch(() => {
                this.$bridge.callHandler('cancelNavKeepView')
              })
            }
          }
        }
        
      },
      nextCancel () {
        // 取消--执行保存
        this.nextVisiable = false
        // this.baseFormData()
        // this.formTitle = "保存"
      },
      /**
       * 确认提交表单
       * @return {[type]} [description]
       */
      nextConfirm () {
        if (this.base.processValue == '') {
          this.$toast("请选择下一步流程设定")
        } else if (this.base.flowuser == '') {
          this.$toast("请选择办理人员")
        } else {
          let persons = this.base.flowuser.split(",")
          let msg = "是否将流程转交给 " + persons[0] + " ？"
          if (persons.length > 1) {
            if (persons.length > 3) {
              msg = "是否将流程转交给 " + persons[0] + " 等办理？"
            }else if (persons.length <=2 && persons.length > 1) {
              msg = "是否将流程转交给 " + persons[0]+','+persons[1]+ " 办理？"
            }else if (persons.length <=3 && persons.length > 1) {
              msg = "是否将流程转交给 " + persons[0]+','+persons[1]+ ',' +persons[2]+ " 办理？"
            }
          }
          this.$bridge.callHandler('navKeepView')
          this.$dialog.confirm({
            title: '提示',
            message: msg
          }).then(() => {
            this.nextVisiable = false
            // on confirm
            this.$toast({
              duration: 0,
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
            let nextForm = this.$refs.forms.getFormData()

            // 如果已默认保存附件
            if(!this.alreadyFile) {
              nextForm.filesArray = this.$refs.formFiles.getFormData()
              let preArr = this.preAttachment.map(item => {
                return {'id':item.id, 'url':item.fileaddr,'name':item.filename}
              })
              nextForm.attachment = this.base.attachment.concat(preArr)
            }
            
            nextForm.workid = this.base.workid
            nextForm.number = this.base.number
            nextForm.tplid = this.base.tplid
            nextForm.typeid = this.base.typeid
            nextForm.user_id = this.$store.state.userId
            // nextForm.title = this.base.title
            nextForm.pertype = '1';//审批类型 1通过 2拒绝
            nextForm.nextradio = 'on';//固定
            nextForm.perid = this.base.perid
            nextForm.flowid =  this.base.flowid
            nextForm.content = this.base.content
            
            nextForm.do = 'nextstep'
           /* if(this.flowPeopleData.flowkey2 == '1' && this.flowPeopleData.flowkey3 == '1'){
              //固定，多人审批的时候传appkey1
              nextForm.view = 'appkey1'
            }else{
              nextForm.view = 'personnel'
            }*/
            nextForm.view = 'personnel'
            // 以下是flowPeopleData存的数据，后台需要的
            nextForm.nextflowid = this.flowPeopleData.fid
            nextForm.nextappkey = this.flowPeopleData.flowkey2
            nextForm.nextappkey1 = this.flowPeopleData.flowkey3
            nextForm.nextflowdatetype = this.flowPeopleData.flowdatetype
            nextForm.nextflowdate = this.flowPeopleData.flowdate
            nextForm.flownum = this.flowPeopleData.flownum
            nextForm.user = this.base.flowuser //下一步审批人员
            nextForm.statusValue = this.$route.query.status || null
            if(this.$route.query.tplid == '8908') {
              //因私出国的数据
              nextForm.client = this.client
              nextForm.client_tel = this.clientTel
            }
            let config = {
              method: "post",
              url: `${this.$common.basePath}workclass.php`,
              data: nextForm
            }
            this.$axios(config).then(res => {
              this.$toast.clear()
              this.$toast({
                type: "success",
                message:'提交成功',
                forbidClick: true,
                duration: 1500
              })
              setTimeout(_ => {
                this.$toast({
                  duration: 500,
                  forbidClick: true,
                  className: 'loading-toast',
                  icon: require('../../assets/loading.gif'),
                })
              },1500)
              setTimeout(_ => {
                // this.$router.push({name:'myApproval'})
                this.backMethod();
                // 原生刷新页面
                this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
              },2100)
            }).catch(err => {
              this.$toast.clear()
            })
          }).catch((error) => {
            this.$bridge.callHandler('navKeepView')
          });
        }
      },
      /**
       * 全选
       * @return {[type]} [description]
       */
      checkAll() {
        this.$refs.userCheckGroup.toggleAll(true);
      },
      /**
       * 反选
       * @return {[type]} [description]
       */
      toggleAll() {
        this.$refs.userCheckGroup.toggleAll();
      },
      /**
       * 因私出国
       * @return {[type]} [description]
       */
      showClient() {
        this.clientVisiable = true
      },
      /**
       * 因私出国 确认选择
       * @return {[type]} [description]
       */
      singleConfirmChose() {
        let obj = this.$refs.choosePeople.confirmChose()
        this.clientid = obj.id
        this.client = obj.name
        this.clientVisiable = false
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .group-class {
    background-color: #F5F5F5;
  }
  .van-popup-height {
    min-height: 272px;
    max-height: 60vh;
  }
  .nav-content {
    overflow-y: auto;
    height: calc(100vh - 50px);
    -webkit-overflow-scrolling: touch;
  }
  .padding-b-50 {
    padding-bottom: 50px;
  }
  .margin-b-10 {
    margin-bottom: 15px;
  }
  // 底部按钮样式开始
  .bottom-btn {
    width: calc(100vw - 30px);
    padding: 3px 15px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
  }
  .default-class {
    border: none;
    color: #2E79FF;
  }
  .info-class {
    border-radius: 4px;
  }
  // 底部按钮样式结束
  .multiple-class {
    display: inline-flex;
    align-items: center;
    span{
      margin-right: 5px;
    }
  }
  .mul-left-class {
    max-height: 30px;
  }
  // 下一步流程设定 样式开始
  .container-class {
    padding: 15px ;
    background-color: #fff;
    margin-top: 12px;

    p {
      margin-top: 0;
      margin-bottom: 19px;
      font-weight: bold;
      font-size: 17px;
    }
    // 单选的
    .van-radio{
      margin-bottom: 15px;

      &:last-child{
        margin-bottom: 0;
      }
    }
    // 复选的
    .van-checkbox{
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  // 下一步流程设定 样式结束
  .apply {
    line-height: 28px;
    margin-bottom: 10px;
  }
  .flow-calss {
    line-height: 28px;
    margin-top: 10px;
  }
  .next-row-class {
    max-height: 22px;
    height: 22px;
    padding: 15px;
    width: calc(100vw - 30px);
    border-bottom: 1px solid #F5F5F5;
  }
  .next-position-fixed {
    position: fixed;
    z-index: 6;
    background-color: #fff;
  }
  .row-cancel {
    font-size: 17px;
    color: #333333
  }
  .row-title{
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }
  .row-confirm {
    font-size: 17px;
    color: #2E79FF;
    text-align: right;
  }
  .extr-area {
    margin-top: 12px;
    padding: 5px 15px;
    width: calc(100vw - 30px);
    font-size: 17px;
    background-color: #fff;
  }
  .extr-title {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
  // 附件样式开始
  .file-attachment-class{
    margin-top: 10px;
    background-color: #F5F5F5;

    .file-class {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 4px 0;

      p {
        margin: 0;
      }

      .van-icon-clear {
        margin: 8px;
      }
    }
    .img-class {
      width: 20px;
      height: 23px;
      margin-right: 10px;
    }
    .name-width {
      max-width: calc(100% - 70px);
      min-width: calc(100% - 70px);
    }
  }
  .bottom-btn-all {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
    position: fixed;
    bottom: 0;
  }
  .padding-12 {
    padding-top: 12px;
    padding-bottom:12px;
  }
  .padding-15 {
    padding-top: 15px;
    padding-bottom:15px;
  }
  .font-size14 {
    font-size: 14px;
  }
  .more-class:after {
    content: '、'
  }
  .more-class:last-child::after{
    content: ' '
  }
  .checkboxes-btn {
    position: fixed;
    bottom: 0;
    width: calc(100vw - 30px);
    padding: 2px 15px;
    border-top: 1px solid #ebedf0;
    background-color: #fff;
  }
  .bottom-btn-all {
    padding: 3px 15px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 30px);
    position: fixed;
    bottom: 0;
  }
</style>
<style type="text/css" lang="less">
  #forms {
    .extr-people {
      .van-cell__right-icon {
        line-height: 33px;
      }
    }
    .client-class {
      width: 140px!important;
    }
    .processPicker {
      .van-picker__cancel {
        font-size: 17px;
        color: #333;
      }
      .van-picker__confirm {
        font-size: 17px;
      }
    }
    // 上传按钮样式开始
    .van-uploader__upload {
      width: 50px;
      height: 50px;
      background-color: #F5F5F5;
      border: 1px solid #F5F5F5;
    }
    .multiple-alluser {
      // height: 78vh;

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }

      .van-search {
        padding-top: 63px;
      }
    }
    // 多人审批办理人员
    .multiple-user {
      max-height: 80vh;
      min-height: 40vh;

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }

    }
    // 修改button默认颜色
    .van-button--default {
      border: none;
      font-size: 17px;
    }
    .line-class {
      padding: 5px 15px;
      margin-top: 60px;

      &:after{
        border: none;
        border-bottom: none;
      };
    }
    .next_radio_class {
      .van-cell {
        padding: 1px 15px;
      }

      &:after{
        border-bottom: 1px solid #ebedf0;
      }
    }
    .van-field__control--custom {
      display: block;
    }
  }
</style>
